<template>
	<view class="edituser">
		<view class="info-box">
			<u-line color="#efefef" />
			<u-row gutter="0">
				<u-col span="4">
					<view class="info-left">姓名</view>
				</u-col>
				<u-col span="8"><input type="text" class="info-right" placeholder="请输入姓名" v-model="form.name"></input></u-col>
			</u-row>
			<u-line color="#efefef" />
			<u-row gutter="0">
				<u-col span="4">
					<view class="info-left">电话</view>
				</u-col>
				<u-col span="8"><input type="text" class="info-right" placeholder="请输入电话号码" v-model="form.phone"></input></u-col>
			</u-row>
			<u-line color="#efefef" />
			<u-row gutter="0">
				<u-col span="4">
					<view class="info-left">账号</view>
				</u-col>
				<u-col span="8"><input type="text" class="info-right" placeholder="请输入账号" v-model="form.username"></input></u-col>
			</u-row>
			<u-line color="#efefef" />
			<u-row gutter="0">
				<u-col span="4">
					<view class="info-left">修改图片</view>
				</u-col>
				<u-col span="8">
					<view class="up" style="display: flex;justify-content: flex-end;">
						<upImg dirUrl="user" @logo-cancel="canLogo" ref="upimg"></upImg>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="btn-box">
			<u-button class="btn-item" type="primary" @tap="editUser()">修改</u-button>
			<u-button class="btn-item" type="error" @tap="deleteUser()">删除</u-button>
		</view>
	</view>
</template>

<script>
	import {
		deleteUser,
		updateUser
	} from "@/api/user.js"
	export default {
		data() {
			return {
				form: {},
				zanwu: "暂无"
			}
		},
		onLoad(option) {
			this.form.name = option.name
			this.form.phone = option.phone
			this.form.username = option.username
			// this.form.depName = option.depName
			this.id = option.id
		},
		methods: {
			canLogo(data){
				console.log(data);
				this.form.logo = data
			},
			deleteUser() {
				uni.showModal({
					title: '删除',
					content: '是否永久删除？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							deleteUser(this.id).then(res => {
								console.log(res)
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
								if (res.code !== 1) {
									return
								} else {
									setTimeout(() => {
										var item = true; //item为要传的值
										var pages = getCurrentPages();
										var prevPage = pages[pages.length - 3];
										prevPage.delete = item;
										uni.navigateBack({
											delta: 2
										})
									}, 500)
								}

							})

						} else if (res.cancel) {
							// console.log('用户点击取消');
							uni.showToast({
								title: "取消删除",
								icon: "none"
							})
							return
						}
					}
				})
			},
			editUser() {
				uni.showModal({
					title: "修改",
					content: "是否修改？",
					success: res => {
						if (res.confirm) {
							this.$refs.upimg.update()
							updateUser(this.id, this.form).then(res => {
								console.log(res)
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
								if (res.code !== 1) {
									return
								}
								setTimeout(() => {
									var item = true; //item为要传的值
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 3];
									prevPage.delete = item;
									uni.navigateBack({delta:2})
								}, 500)

							})
						} else {
							uni.showToast({
								title: "取消成功",
								icon: "none",
								duration: 1500
							})
						}
					}

				})

				// console.log(this.form)

			},
		}
	}
</script>

<style lang="scss">
	.edituser {
		padding: 0 30rpx;
	}

	.info-box {
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		padding: 20rpx 40rpx;

		.info-left {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 1rpx;
			color: #b1b8c8;
			padding: 20rpx 0px;
		}

		.info-right {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 1rpx;
			color: #2c3240;
			text-align: right;
			font-weight: bold;
			padding: 20rpx 0px;
		}
	}

	.btn-box {
		// padding: 20rpx;
		padding-top: 60rpx;

		// padding-top: 70rpx;
		.btn-item {
			// margin-bottom: 40rpx;
			margin-top: 20rpx;
		}
	}
</style>
